<template>
	<view class="app-layout">
		<app-layout :haveBackground="false">
			<!-- 10.13 设置一层障碍 -->
			<view class="conpond" v-if="zaid == 0">
				<view class="hvc">
					<view class="linput">
						<input class="leditbox" @blur="blur" type="text" :value="warepwd" placeholder-class="peditext"
							placeholder="请输入密码" />
					</view>
					<view class="lbutton" :class="themeObject.back" @click="toware">
						<button type="default" :plain="true" class="lbtn">验证密码</button>
					</view>
				</view>
			</view>
			<view class="pond">
				<view class="pond-head" :style="{'background-image': `url(${ setting.bg_pic})`}">
					<view @click="rules">中奖说明</view>
					<!-- 10.12 注释 -->
					<!-- <view @click="share">分享</view> -->
					<!-- <app-share-qr-code-poster v-model="shareShow" :url="poster" title="生成海报"></app-share-qr-code-poster> -->
				</view>
				<view class="pond-oppty">
					<view>您还有
						<text>{{ oppty }}</text>
						次抽奖机会
					</view>
				</view>
				<view class="pond-box"
					:style="{height: 'calc(100vh - 480rpx - ' + `${bottomHeight}` + 'rpx)',
                      background: 'linear-gradient(' + setting.bg_color +', '+ (setting.bg_color_type === 'gradient' ? setting.bg_gradient_color: setting.bg_color) + ')'}">
					<view class="container-out">
						<view
							:style="{top: v.topCircle, left: v.leftCircle, background: i%2 === 0 ? colorCircleFirst : colorCircleSecond}"
							class="container-circle" v-for="(v,i) in circleList" :key="i"></view>
						<view class="container-in">
							<view
								:style="{top: v.topAward, left: v.leftAward, background: i == indexSelect ? colorAwardSelect : colorAwardDefault}"
								class="content-out" v-for="(v,i) in awardList" :key="i">
								<!-- 10.19 -->
								<image class="img" :src="v.image_url" load-lazy></image>
								<!-- <image class="img" :src="v.image_url" mode="aspectFit" load-lazy></image> -->
								<!-- <view class="name">{{ v.name }}</view> -->
							</view>
							<view class="start-btn" @click="startGame">
								<image class="pond-start1" src="./../image/pond-button.png" load-lazy></image>
								<block v-if="setting.deplete_integral_num > 0">
									<view class="pond-start2" :animation="animationData">
										<image src="./../image/pond-register.png" load-lazy></image>
									</view>
									<view class="main-center pond-register">
										<view :animation="animationData">
											-{{ setting.deplete_integral_num }}金币
										</view>
									</view>
								</block>
								<image v-else class="pond-start3" src="./../image/pond-start.png"
									:animation="animationData" load-lazy></image>
							</view>
						</view>
					</view>
					<view class="dir-left-nowrap main-center cross-center end">
						<view @click="home" class="dir-left-nowrap cross-center box-grow-0 left">
							<icon class="end-icon home"></icon>
							<view>回到首页</view>
						</view>
						<view @click="prize" class="dir-left-nowrap cross-center box-grow-0">
							<view>我的中奖记录</view>
							<icon class="end-icon price"></icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 活动弹窗 -->
			<view v-if="status==2">
				<view class="act-modal">
					<view class="act-modal-bg"></view>
					<view class="act-modal-pic cross-center main-center">
						<view class="act-modal-info success">
							<icon class="image-bg" :style="{'background-image': `url(${appImg.pond_success})`}">></icon>
							<icon class="image-close" @click="closeActModal"></icon>
							<view class="main-center">
								<text class="text">
									<!-- 恭喜\n抽中{{ name }} -->恭喜您抽中\n{{ name }}\n请查看自己的中奖记录
								</text>
							</view>
							<view class="main-center">
								<view class="box main-center">
									<app-button @click="closeActModal" color="#FFFFFF" background="#FF4544"
										font-size="32" height="80" width="480" round>确定
									</app-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="status==1">
				<view class="act-modal show">
					<view class="act-modal-bg"></view>
					<view class="act-modal-pic cross-center main-center">
						<view class="act-modal-info error">
							<icon class="image-bg" :style="{'background-image': `url(${appImg.pond_empty})`}">></icon>
							<icon class="image-close" @click="closeActModal"></icon>
							<view class="main-center">
								<text class="text">谢谢参与</text>
							</view>
							<view class="main-center">
								<view class="box main-center">
									<app-button @click="closeActModal" color="#FFFFFF" background="#FF4544"
										font-size="32" height="80" width="480" round>关闭
									</app-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</app-layout>
	</view>
</template>

<script>
	import appShareQrCodePoster from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster';

	import {
		mapGetters,
		mapState
	} from 'vuex';

	export default {
		name: "index",
		components: {
			appShareQrCodePoster
		},
		computed: {
			...mapState({
				tabBarNavs: state => state.mallConfig.navbar.navs,
				appImg: state => state.mallConfig.plugin.pond.app_image,
				userInfo: state => state.user.info,
			}),
			// 10.13 设置障碍的样式颜色
			...mapGetters('mallConfig', {
				getSetting: 'getSetting',
				getTheme: 'getTheme',
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},

			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
				getEmpty: 'getEmpty',
			}),
			bottomHeight() {
				let s = this.tabBarNavs.find(item => {
					let currentRoute = '/plugins/pond/index/index';
					if (currentRoute.includes(item.url.split('?')[0])) {
						return true;
					}
					return false;
				})
				if (s) {
					return this.BotHeight;
				} else {
					return 0;
				}
			},
		},
		data() {
			let bout, btn, animation;
			return {
				bout,
				btn,
				animation,
				circleList: [], //圆点数组
				awardList: [], //奖品数组
				colorCircleFirst: '#F12416', //圆点颜色1
				colorCircleSecond: '#FFFFFF', //圆点颜色2
				colorAwardDefault: '#F5F0FC', //奖品默认颜色
				colorAwardSelect: '#FFE400', //奖品选中颜色
				indexSelect: 0, //被选中的奖品index
				prizeIndex: 0, //奖品index
				isRunning: false, //是否正在抽奖,

				animationData: {},
				status: 0,
				setting: null,
				oppty: 0,
				msg: '', //提示文字
				name: '', //奖品名称
				//海报参数
				poster: this.$api.pond.poster,
				shareShow: false,
				// 10.13 设置障碍的参数
				warepwd: '',
				zaid: 0
			}
		},
		// 10.14 密码在onload需要填写，不需要再次填写
		onLoad() {
			this.zaid = 0
		},
		onShow: function() {
			const self = this;
			// 10.13 默认

			self.$showLoading({
				title: '加载中'
			});
			self.$request({
				url: this.$api.pond.index,
			}).then(info => {
				self.$hideLoading();
				if (!info.data) {
					uni.showToast({
						title: info.msg,
						icon: 'none'
					});
					return;
				}

				self.oppty = info.data.oppty;
				self.msg = info.msg;
				self.setting = info.data.setting;

				let list = info.data.list;
				let topAward = 18;
				let leftAward = 18;
				for (let j = 0; j < 8; j++) {
					if (j === 0) {
						topAward = 18;
						leftAward = 18;
					} else if (j < 3) {
						leftAward = leftAward + 196 + 8;
					} else if (j < 5) {
						topAward = topAward + 158 + 8;
					} else if (j < 7) {
						leftAward = leftAward - 196 - 8;
					} else if (j < 8) {
						topAward = topAward - 158 - 8;
					}
					list[j].topAward = topAward + 'rpx';
					list[j].leftAward = leftAward + 'rpx';
				}
				self.awardList = list;
				//动画
				self.boutAnimation();
				self.btnAnimation();
			}).catch(e => {
				self.$hideLoading();
			})
		},

		// 10.12 注释
		// onLoad: () => {
		// 	uni.showShareMenu({
		// 		menus: ['shareAppMessage', 'shareTimeline']
		// 	})
		// },

		// onShareAppMessage: function() {
		// 	return this.$shareAppMessage({
		// 		title: this.$children[0].navigationBarTitle,
		// 		path: '/plugins/pond/index/index',
		// 		params: {}
		// 	});
		// },
		// onShareTimeline() {
		// 	// 分享朋友圈beta
		// 	return this.$shareTimeline({
		// 		title: this.$children[0].navigationBarTitle,
		// 		query: {} // 此处填写页面的参数
		// 	});
		// },
		onHide: function() {
			clearInterval(this.bout);
			clearInterval(this.btn);
		},
		methods: {
			// 10.13 设置障碍的码
			blur(e) {
				this.warepwd = e.target.value
			},
			toware() {
				if (this.warepwd == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入密码',
						duration: 2000
					})
					return;
				}
				if (this.warepwd == JSON.parse(this.getSetting.vdian_earnings_ratio).pondpsd) {
					this.zaid = 1
					// 10.19 添加输入密码进入 请求 （统计）
					this.$request({
						url: this.$api.activity.nine,
					}).then(res => {
						console.log(res);
					}).catch(e => {
						console.log(e);
					})
				} else {
					this.zaid = 0
					uni.showToast({
						icon: 'none',
						title: '密码错误'
					})
				}
			},
			home() {
				// 8.24将redirect改掉
				uni.reLaunch({
					url: `/pages/index/index`
				});
			},
			prize() {
				uni.navigateTo({
					url: `/plugins/pond/prize/prize`
				});
			},
			rules() {
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(this.$api.pond.setting)}&keys=${JSON.stringify(['setting', 'rule'])}`,
				});
			},
			share() {
				this.shareShow = true;
			},

			//开始抽奖
			startGame: function() {
				const self = this;
				if (self.isRunning) return
				if (self.msg) {
					uni.showToast({
						title: self.msg,
						icon: 'none'
					});
					self.isRunning = false;
					return;
				}

				clearInterval(self.btn);
				self.animation.translate(0, 0).step();
				self.animationData = self.animation.export();

				self.isRunning = true;
				self.prizeIndex = 0;
				//循环
				let i = 0;
				let indexSelect = self.indexSelect;
				let list = self.awardList;
				let timer = setInterval(() => {
					i += 30;
					indexSelect++;
					indexSelect = indexSelect % 8;
					self.indexSelect = indexSelect;

					if (self.prizeIndex > 0 && indexSelect + 1 == self.prizeIndex) {
						clearInterval(timer);
						self.btnAnimation();
						self.isRunning = false;
						self.name = list[indexSelect].name;
						self.status = list[indexSelect].type == 5 ? 1 : 2;
					}
				}, (200 + i))

				self.$request({
					url: self.$api.pond.lottery,
				}).then(info => {
					if (info.code === 0) {
						list.map((item, index, array) => {
							if (item.id == info.data.id) {
								setTimeout(() => {
									self.prizeIndex = index + 1;
									self.oppty = info.data.oppty;
									self.msg = info.msg;
								}, 2000)
							}
						});
						return;
					}
					clearInterval(timer);
					uni.showToast({
						title: info.msg,
						icon: 'none'
					});
					self.isRunning = false;
					self.btnAnimation();
				}).catch(info => {
					clearInterval(timer);
					self.isRunning = false;
					self.btnAnimation();
				})
			},

			//圆点设置
			boutAnimation: function() {
				const self = this;
				let leftCircle = 4;
				let topCircle = 4;
				let circleList = [];
				for (let i = 0; i < 24; i++) {
					if (i === 0) {
						topCircle = 8;
						leftCircle = 8;
					} else if (i < 6) {
						topCircle = 4;
						leftCircle = leftCircle + 110;
					} else if (i === 6) {
						topCircle = 8
						leftCircle = 660;
					} else if (i < 12) {
						topCircle = topCircle + 92;
						leftCircle = 663;
					} else if (i === 12) {
						topCircle = 545;
						leftCircle = 660;
					} else if (i < 18) {
						topCircle = 550;
						leftCircle = leftCircle - 110;
					} else if (i === 18) {
						topCircle = 545;
						leftCircle = 10;
					} else if (i < 24) {
						topCircle = topCircle - 92;
						leftCircle = 5;
					} else {
						return
					}
					circleList.push({
						topCircle: topCircle + 'rpx',
						leftCircle: leftCircle + 'rpx'
					});
				}
				self.circleList = circleList;
				//圆点闪烁
				self.bout = setInterval(() => {
					const temp = self.colorCircleFirst;
					self.colorCircleFirst = self.colorCircleSecond;
					self.colorCircleSecond = temp;
				}, 900)
			},

			btnAnimation: function() {
				const self = this;
				let animation = uni.createAnimation({
					duration: 500,
					timingFunction: "step-start",
					delay: 0,
					transformOrigin: "50% 50%",
				});
				self.animation = animation;
				let sentinel = true;
				self.btn = setInterval(() => {
					if (sentinel) {
						animation.translate(0, 0).step();
						sentinel = false;
					} else {
						animation.translate(0, -3).step();
						sentinel = true;
					}
					self.animationData = animation.export();
				}, 900)
			},

			closeActModal() {
				this.status = 0;
			},
		}
	}
</script>

<style scoped lang="scss">
	// 10.13 设置障碍样式
	.conpond {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		z-index: 2;
		position: fixed;
		left: 0;
		top: 0;

		.hvc {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.logo {
			width: 176rpx;
			// margin: 316rpx auto 56rpx;
			padding: 316rpx 0 56rpx;
			margin: 0 auto;

			.limg {
				width: 176rpx;
				height: 176rpx;
			}
		}

		.linput {
			width: 654rpx;
			/* height: 60rpx;
			line-height: 60rpx; */
			margin: 0 auto 88rpx;
			background: #F5F5F5;
			border-radius: 48rpx;
			color: #342B2A;
			font-size: 28rpx;
			position: relative;

			.leditbox {
				padding: 24rpx;
				border-radius: 48rpx;
				background: #F5F5F5;
				color: #342B2A;
				font-weight: normal;
				width: 100%;
				height: 88rpx;
				box-sizing: border-box;
			}

			.peditext {
				color: #999999;
			}

			.ledit {
				position: absolute;
				top: 20rpx;
				right: 48rpx;
				width: 46rpx;
				height: 48rpx;
			}
		}

		.lbutton {
			width: 654rpx;
			margin: 32rpx auto;
			height: 88rpx;
			border-radius: 56rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			font-weight: bold;

			.lbtn {
				text-align: center;
				width: 654rpx;
				margin: 32rpx auto;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 24rpx;
				font-weight: bold;
				border-radius: 56rpx;
				color: #FFFFFF;
				border: none;
			}
		}

		.ltips {
			width: 654rpx;
			margin: 32rpx auto;
			color: #CDCDCD;
			font-size: 24rpx;
		}
	}

	.app-layout {
		min-height: 100vh;
	}

	.app-layout /deep/ .app-layout {
		min-height: 100vh;
	}

	.pond {
		text-align: center;

		.pond-box {
			min-height: #{700rpx};
			padding-top: #{20rpx};
		}

		.pond-head {
			height: #{480rpx};
			width: #{100%};
			background-repeat: no-repeat;
			background-size: 100% 100%;

			view {
				color: #FFFFFF;
				font-size: $uni-font-size-weak-one;
				background: #000000;
				text-align: center;
				background-color: rgba(0, 0, 0, 0.4);
				line-height: #{48rpx};
				// 10.19
				// width: #{92rpx};
				// width: 148rpx;
				padding: 0 24rpx;

				border-radius: #{24rpx} 0 0 #{24rpx};
				position: absolute;
				right: 0;
				top: #{40rpx};
			}

			view:nth-child(2) {
				top: #{112rpx}
			}
		}

		.pond-oppty {
			line-height: #{56rpx};
			font-size: #{28rpx};
			position: absolute;
			text-align: center;
			width: 100vw;
			top: #{450rpx};

			view {
				color: #ffffff;
				padding: 0 #{30rpx};
				display: inline-block;
				background: rgba(0, 0, 0, 0.3);
				border-radius: #{28rpx};
			}

			text {
				color: #ffb92a;
			}
		}

		/**小圆球 **/
		.container-out {
			height: #{566rpx};
			width: #{680rpx};
			background-color: #F47915;
			margin: #{32rpx} auto #{30rpx} auto;
			border-radius: #{16rpx};
			position: relative;
		}

		.container-in {
			width: #{640rpx};
			height: #{526rpx};
			background-color: #f12416;
			border-radius: #{20rpx};
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;

		}

		.container-circle {
			position: absolute;
			display: block;
			border-radius: 50%;
			height: #{15rpx};
			width: #{15rpx};
		}

		// 10.19 修
		.content-out {
			position: absolute;
			height: #{144rpx};
			width: #{196rpx};
			background-color: #f5f0fc;
			border-radius: #{16rpx};
			box-shadow: 0 #{16rpx} 0 #FFCEC0;

			.img {
				// position: absolute;
				// top: #{12rpx};
				// left: 50%;
				// margin-left: #{-75rpx};
				// width: #{150rpx};
				// height: #{80rpx};
				padding: 10rpx;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.name {
				position: absolute;
				bottom: 0;
				top: #{24rpx + 80rpx};
				;
				color: #c62015;
				font-size: #{24rpx};
				width: #{196rpx};

				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				line-height: 1.5;
			}
		}

		/****/
		.pond-start1 {
			height: #{160rpx};
			width: 100%;
		}

		.pond-start2 {
			display: inline;
			position: absolute;
			left: #{10rpx};
			height: #{136rpx};
			width: #{178rpx};
		}

		.pond-start2 image {
			height: 100%;
			width: 100%;
		}

		.pond-start3 {
			position: absolute;
			left: #{10rpx};
			height: #{136rpx};
			width: #{178rpx};
		}

		.pond-register {
			position: absolute;
			top: #{84rpx};
			width: 100%;

			view {
				font-size: #{26rpx};
				padding: 0 #{16rpx};
				border-radius: #{16rpx};
				line-height: #{32rpx};
				background: #fff4ba;
			}
		}

		.start-btn {
			position: absolute;
			margin: auto;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			border-radius: #{16rpx};
			height: #{159rpx};
			width: #{196rpx};
			color: #f6251e;
			text-align: center;
			font-weight: bolder;
			line-height: #{154rpx};
		}

		.end {
			color: #FFFFFF;
			font-size: #{28rpx};

			.left {
				margin-right: #{160rpx};
			}

			.end-icon {
				background-repeat: no-repeat;
				background-size: 100% 100%;
				margin: 0 #{16rpx};
			}

			.end-icon.home {
				height: #{30rpx};
				width: #{30rpx};
				background-image: url('../../../static/image/icon/icon-home-white.png');
			}

			.end-icon.price {
				height: #{22rpx};
				width: #{12rpx};
				background-image: url('../../../static/image/icon/arrow-right-white.png');
			}
		}

	}

	.act-modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2001;
		transition: 200ms;

		.show {
			visibility: visible;
			opacity: 1;
		}

		.act-modal-bg {
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.act-modal-pic {
			background: rgba(0, 0, 0, 0.25);
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.act-modal-info {
			text-align: center;
			position: relative;
		}

		.success {
			top: #{0rpx};
			width: 100%;

			.image-bg {
				height: #{462rpx};
				width: 100%;
				display: block;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.image-close {
				position: absolute;
				right: #{80rpx};
				top: 0;
				height: #{30rpx};
				width: #{30rpx};
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('../../../static/image/icon/close.png');
			}

			.text,
			.box {
				width: #{591rpx};
				background: #ffffff;
				color: #353535;
			}

			.box {
				border-radius: 0 0 #{16rpx} #{16rpx};
				text-align: center;
				padding: #{64rpx} 0;
			}
		}

		.error {
			top: #{0rpx};
			width: 100%;

			.image-bg {
				height: #{240rpx};
				width: 100%;
				display: block;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.image-close {
				position: absolute;
				right: #{80rpx};
				top: 0;
				height: #{30rpx};
				width: #{30rpx};
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('../../../static/image/icon/close.png');
			}

			.text,
			.box {
				width: #{591rpx};
				background: #ffffff;
				color: #353535;
			}

			.box {
				border-radius: 0 0 #{16rpx} #{16rpx};
				text-align: center;
				padding: #{64rpx} 0;
			}
		}
	}
</style>
